<!DOCTYPE html>
<html>
<head>
  <title>EntroType Typing Tutor</title>
  <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="keyboardlayout.js"></script>
  <script type="text/javascript" src="simplegame.js"></script>
  <script type="text/javascript">
    layout = new KeyboardLayout();

    $(document).ready(function(){
      var level_query = "";

      $("#select_layout").change(function(event) {
        var target = event.delegateTarget;
        var selected = target.options[target.selectedIndex];
        layout = new KeyboardLayout(KeyboardLayout.LAYOUT[selected.value]);
      });

      var getRandomChar = function() {
        return layout.getRandomChar(level_query);
      };

      var updateSelectionDisplay = function() {
        $("div .level-select").each(function(idx, elem) {
          elem = $(elem).removeClass("selected");
          if (elem.attr("id") == level_query) {
            elem.addClass("selected");
          }
        });
      };

      var level_div = $("#div_levels");
      $.each(layout.levels, function(idx, elem) {
        level_div.append($("<div/>", {
            text: elem.title,
            id: elem.query,
            class: "level-select",
            css: {
              position: "relative",
              display: "block",
            },
            click: function(event) {
              level_query = elem.query;
              console.log("changed query to " + level_query);
              updateSelectionDisplay();
            },
        }));
      });

      game = new SimpleGame($("#div_viewport"), getRandomChar);

      // Key Up
      $(document).keypress(function(event){
        var ch = String.fromCharCode(event.which);
        game.answerAttempt(ch);
        event.preventDefault();
      });

      // Initial setup
      $("#btn_start").
        val("Start").
        click(function(event){
          var target = event.delegateTarget;
          if (game.running()) {
            game.stop();
          } else {
            game.start();
          }
          target.value = (game.running()) ? "Stop" : "Start";
        });

      //$("#div_viewport").text("Click 'Start' to begin.");

    });
  </script>
  <style>
    BODY {
      margin:0px
    }
    #div_viewport {
      width: 800px;
      height: 600px;
      border: black 1px;
      border-style: solid;
      text-align: center;
      position: relative;
    }
    #div_controls {
      top: 0px;
      text-align: center;
      position: relative;
      display: inline-block;
      vertical-align: top;
    }
    #div_levels {
      top: 0px;
      display: inline-block;
      position: relative;
      border: 1px black solid;
      vertical-align: top;
    }
    #div_main {
      display: inline-block;
      position: relative;
      border: 1px blue solid;
    }
    .level-select {
      background-color: #eee;
      border: 1px solid green;
    }
    .selected {
      background-color: #ccc;
    }
    .neutral {
      background-color: #ee2;
    }
    .correct {
      background-color: #2e2;
    }
    .wrong {
      background-color: #e22;
    }
    .stats {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div id="div_main">
    <div id="div_levels"></div>
    <div id="div_controls">
      <div id="div_viewport"></div>
      <form>
        <input id="btn_start" type="button">
        <select id="select_layout" name="Keyboard Layout">
          <option id="option_ansi_qwerty" value="ansi_qwerty" selected>ANSI QWERTY</option>
          <option id="option_ansi_dvorak" value="ansi_dvorak">ANSI DVORAK</option>
        </select>
      </form>
    </div>
  </div>
</body>
</html>
